<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>
  <input type="file" accept="image/png, image/jpeg" id="input">
  <img src="" alt="" id="img">
</body>
<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
<script>
  document.getElementById("input").addEventListener("change", function (e) {
    // console.log(e.target.files)
    // e.target.files => 伪数组
    Array.from(e.target.files).map((f,i)=>{
      let formData = new FormData()
      formData.append("file",f)
      // http://tt.linweiqin.com/api/tt/aliossUpload
      axios.post("http://localhost:3000/uploadImg",formData).then(res=>{
        console.log(res.data)
        let img_url = "http://localhost:4000/uploads/"+res.data.url
        document.getElementById("img").setAttribute("src",img_url)
      }).catch(err=>console.log(err))
    })
  })
</script>

</html>